<template>
  <div>
    <!-- <add-tool v-if="hasTool" :map.sync="map"></add-tool> -->
    <div id="container"></div>
    <div class="button-group">
        <!-- <input type="button" class="button" value="是否显示" @click="showTool"/> -->
        <input type="text" size="30" v-model="shipCode" value="" placeholder="请输入物流单号" />
        <input type="button" class="button" value="路线查询" @click="searchShip"/>
        <input type="button" class="button" value="开始动画" @click="move"/>
        <input type="button" class="button" value="停止动画" @click="stop"/>
    </div>
  </div>
</template>

<script>
import AMap from 'AMap'
// import AddTool from './AddTool'
export default {
  data () {
    return {
      markers: [],
      car: Object,
      lineArr: [],
      hasTool: {
        type: Boolean,
        default: true
      },
      shipCode: {
        type: String,
        default: ''
      },
      map: Object
    }
  },
  methods: {
    getLocation (address, index) {
      this.markers = []
      this.lineArr = []
      let x = ''
      let y = ''
      let p = this.$http.get('http://restapi.amap.com/v3/geocode/geo?address=' + address + '&output=json&key=05d8c66c8d827bd7ed8559acccd704ce').then((response) => {
        if (response.body.count > 0) {
          let temp = response.body.geocodes[0].location.split(',')
          x = temp[0].trim()
          y = temp[1].trim()

          if (x !== '' && y !== '') {
            this.markers[index] = {position: [x, y], title: address, label: {offset: new AMap.Pixel(10, -22), content: address}}
            // this.markers.push({position: [x, y], title: address, label: {offset: new AMap.Pixel(10, -22), content: address}})
          }
        }
      }, (response) => {
        console.log('error')
      })
      return p.promise
    },
    move () {
      this.car.moveAlong(this.lineArr, 50000)
    },
    stop () {
      this.car.stopMove()
    },
    showTool () {
      this.hasTool = !this.hasTool
    },
    searchShip () {
      let self = this
      // window.alert(self.shipCode)
      console.log('物流单号：' + self.shipCode)
      // 清除地图上的覆盖物
      let m = self.map.getAllOverlays('marker')
      let pl = self.map.getAllOverlays('polyline')
      if ((m && m.length > 0) || (pl && pl.length > 0)) {
        self.map.clearMap()
      }
      let addrs = []
      let p = []
      addrs.push('浙江富阳公司B')
      addrs.push('杭州分拨中心')
      addrs.push('温州分拨中心')
      addrs.push('浙江温州永嘉桥下公司')
      /* Promise.all([
        self.getLocation('浙江富阳公司B'),
        self.getLocation('杭州分拨中心'),
        self.getLocation('温州分拨中心'),
        self.getLocation('浙江温州永嘉桥下公司')
      ]).then(response => {})*/
      addrs.forEach((address, index) => {
        p.push(self.getLocation(address, index))
      })
      Promise.all(p).then((data) => {
        self.markers.forEach((marker, index) => {
          /* let icon = '../../static/images/map/mark_s.png'
          if (index === 0) {
            icon = '../../static/images/map/start.png'
          } else if (index === (self.markers.length - 1)) {
            icon = '../../static/images/map/end.png'
          }*/
          if (index === 0) {
            self.car = new AMap.Marker({
              icon: '../../static/images/map/car.png',
              position: marker.position,
              map: self.map,
              offset: new AMap.Pixel(-26, -13),
              autoRotation: true
            })
          }
          let mk = new AMap.Marker({
            // icon: icon,
            content: '<div class="marker">' + (index + 1) + '</div>',
            position: marker.position,
            map: self.map,
            title: marker.title,
            animation: 'AMAP_ANIMATION_DROP' // 点标记的动画效果,BOUNCE(跳动)
            // label:marker.label
          })
          let infoWindow = new AMap.InfoWindow({
            content: marker.title,
            offset: {x: 0, y: -30}
          })
          mk.on('mouseover', e => {
            infoWindow.open(self.map, mk.getPosition())
          })
          mk.on('mouseout', e => {
            infoWindow.close(self.map, mk.getPosition())
          })
          self.lineArr.push(marker.position)
        })
        let polyline = new AMap.Polyline({
          path: self.lineArr,            // 设置线覆盖物路径
          strokeColor: '#3366FF',   // 线颜色
          strokeOpacity: 1,         // 线透明度
          strokeWeight: 2,          // 线宽
          strokeStyle: 'dashed',     // 线样式solid（实线）
          strokeDasharray: [10, 5], // 补充线样式
          geodesic: true           // 绘制大地线
        })
        self.map.setFitView() // 地图自适应
        polyline.setMap(self.map)
        self.car.moveAlong(self.lineArr, 50000)
      })
    }
  },
  watch: {
    hasTool () {
      if (this.hasTool) {
        console.log(this.$el)
      } else {
        window.alert(false)
      }
    }
  },
  ready () {
    this.map = new AMap.Map('container', {
      resizeEnable: true
    })
    this.map.plugin(['AMap.ToolBar'], () => {
      this.map.addControl(new AMap.ToolBar())
    })
    if (window.location.href.indexOf('&guide=1') !== -1) {
      this.map.setStatus({scrollWheel: false})
    }
  },
  beforeDestroy () {
    this.shipCode = ''
  }
}

</script>

<style lang="less">
@import '../../less/map/main1119.less';
</style>